<!DOCTYPE html>
<html lang="zh-CN">
    <head>
  <!-- 元数据 -->
  <meta charset="utf-8">
  
  
  <title>html基础 | 月蝉の小窝</title>
  
  <meta name="author" content="月蝉" />
  <meta http-equiv="Cache-Control" content="no-transform" />
  <meta http-equiv="Cache-Control" content="no-siteapp" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="robots" content="index,follow" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
  <meta name="format-detection" content="telphone=no, email=no" />
  
    <meta name="keywords" content="前端, 基础" />
  
  <meta name="description" content="什么是html？HTML的全称为超文本标记语言(Hyper Text Markup Language)，是一种标记语言。它包括一系列标签，通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字、图形、动画、声音、表格、链接等。 什么是超文本？超文本是一种组织信息的方式，它通过超级链接方法将文本中">
<meta property="og:type" content="article">
<meta property="og:title" content="html基础">
<meta property="og:url" content="https://moon-cicada.gitee.io/blog/2023/10/31/HTML/html%E5%9F%BA%E7%A1%80/index.html">
<meta property="og:site_name" content="月蝉の小窝">
<meta property="og:description" content="什么是html？HTML的全称为超文本标记语言(Hyper Text Markup Language)，是一种标记语言。它包括一系列标签，通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字、图形、动画、声音、表格、链接等。 什么是超文本？超文本是一种组织信息的方式，它通过超级链接方法将文本中">
<meta property="og:locale" content="zh_CN">
<meta property="article:published_time" content="2023-10-30T17:40:30.000Z">
<meta property="article:modified_time" content="2023-10-31T03:51:48.436Z">
<meta property="article:author" content="月蝉">
<meta property="article:tag" content="前端">
<meta property="article:tag" content="基础">
<meta name="twitter:card" content="summary">
  
  <!-- 站点验证相关 -->
  
    
    
    
  
  <!-- 样式表文件 -->
  <link rel="stylesheet" id="kratos-css" href="/blog/css/kratosr.min.css" media="all"></script>
  
    <link rel="stylesheet" id="darkmode-css" href="/blog/css/kr-color-dark.min.css" media="(prefers-color-scheme: dark)"></script>
    <script src="/blog/js/kr-dark.min.js"></script>
  
  
    <link rel="stylesheet" id="highlight-css" href="/blog/css/highlight/night-eighties.min.css" media="all"></script>
  
  <link rel="stylesheet" id="fontawe-css" href="/blog/vendors/font-awesome@4.7.0/css/font-awesome.min.css" media="all"></script>
  <link rel="stylesheet" id="nprogress-css" href="/blog/vendors/nprogress@0.2.0/nprogress.css" media="all"></script>
  
  
    <link rel="stylesheet" href="/blog/vendors/aplayer@1.10.1/dist/APlayer.min.css"></script>
  
  
    <link rel="stylesheet" href="/blog/vendors/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css"></script>
  
  <!-- 不得不预先加载的一些JS文件 -->
  <script src="/blog/vendors/jquery@3.6.0/dist/jquery.min.js"></script>
  
    <script src="/blog/vendors/qrcode_js@1.0.0/qrcode.min.js"></script>
  
  
  <style>
    
    
  </style>
  
<meta name="generator" content="Hexo 6.3.0"></head>


    <body class="custom-background">
        <div id="kratos-wrapper">
    <div id="kratos-page">
        <div id="kratos-header">
            <header id="kratos-desktop-topnav" class="kratos-topnav">
                <div class="container">
                    <div class="nav-header">
                        <nav id="kratos-menu-wrap">
                            <ul id="kratos-primary-menu" class="sf-menu">
                                
                                    
                                    
                                        
                                            <li><a href="/blog/"><i class="fa fa-home"></i>首页</a></li>
                                        
                                    
                                        
                                            <li><a href="/blog/archives/"><i class="fa fa-file"></i>档案馆</a></li>
                                        
                                    
                                        
                                            <li><a href="/blog/about/"><i class="fa fa-paper-plane"></i>关于我</a></li>
                                        
                                    
                                
                            </ul>
                        </nav>
                    </div>
                </div>
            </header>
            <header id="kratos-mobile-topnav" class="kratos-topnav">
                <div class="container">
                    <div class="color-logo"><a href="/blog/">月蝉の小窝</a></div>
                    <div class="nav-toggle">
                        <a class="kratos-nav-toggle js-kratos-nav-toggle">
                            <i></i>
                        </a>
                    </div>
                </div>
            </header>
        </div>
        <div class="kratos-start kratos-hero-2">
            <!-- <div class="kratos-overlay"></div> -->
            <div class="kratos-cover kratos-cover-2 text-center">
                <div class="desc desc2 animate-box">
                    <a href="/blog/">
                        <h2>月蝉の小窝</h2> <br />
                        <span></span>
                    </a>
                </div>
            </div>
        </div>

        <div id="kratos-blog-post">
            <div class="container">
                <div id="main" class="row">
                    

        

            <section class="col-md-8">

        

            <article itemscope itemtype="https://schema.org/Article">
    
    <link itemprop="mainEntityOfPage" href="https://moon-cicada.gitee.io/blog/2023/10/31/HTML/html%E5%9F%BA%E7%A1%80/">
    <div class="kratos-hentry kratos-post-inner clearfix">
        <header class="kratos-entry-header">
            
                <h1 class="kratos-entry-title text-center" itemprop="name headline">html基础</h1>
            
            
            <ul class="kratos-post-meta text-center">
                <li><time datetime="2023-10-30T17:40:30.000Z" itemprop="datePublished"><i class="fa fa-calendar"></i> 2023-10-31</time></li>
                <li itemprop="author" itemscope itemtype="https://schema.org/Person">
                    <i class="fa fa-user"></i> 作者 <span itemprop="name">月蝉</span>
                </li>
                
                    <li>
                        <i class="fa fa-edit"></i> 
                        
                        
                            ~2.12K
                        
                        字
                    </li>
                
                
                    <li id="/blog/2023/10/31/HTML/html%E5%9F%BA%E7%A1%80/" class="leancloud_visitors" data-flag-title="html基础">
                        <i class="fa fa-eye"></i>
                        <span class="leancloud-visitors-count"> </span> 次阅读
                    </li>
                
            </ul>
        </header>
        <div class="kratos-post-content">
            
            <div id="expire-alert" class="alert alert-warning hidden" role="alert">
                <div class="icon"><i class="fa fa-warning"></i></div>
                <div class="text"><p>本文最后编辑于 <time datetime="1698724308436"></time> 前，其中的内容可能需要更新。</p></div>
            </div>
            
            
            
                <div class="kratos-post-inner-toc toc-div-class" >
                    <ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%BB%80%E4%B9%88%E6%98%AFhtml%EF%BC%9F"><span class="toc-number">1.</span> <span class="toc-text">什么是html？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%BB%80%E4%B9%88%E6%98%AF%E8%B6%85%E6%96%87%E6%9C%AC%EF%BC%9F"><span class="toc-number">2.</span> <span class="toc-text">什么是超文本？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#html%E7%9A%84%E5%AE%9A%E4%B9%89"><span class="toc-number">3.</span> <span class="toc-text">html的定义</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#html%E7%9A%84%E5%8E%86%E5%8F%B2"><span class="toc-number">4.</span> <span class="toc-text">html的历史</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#html%E7%9A%84%E7%89%B9%E7%82%B9"><span class="toc-number">5.</span> <span class="toc-text">html的特点</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%BC%96%E8%BE%91%E6%96%B9%E5%BC%8F"><span class="toc-number">6.</span> <span class="toc-text">编辑方式</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%8E%A8%E8%8D%90%E7%BC%96%E8%BE%91%E5%99%A8"><span class="toc-number">6.1.</span> <span class="toc-text">推荐编辑器</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#html%E5%85%83%E7%B4%A0"><span class="toc-number">7.</span> <span class="toc-text">html元素</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%B5%8C%E5%A5%97%E7%9A%84html%E5%85%83%E7%B4%A0"><span class="toc-number">8.</span> <span class="toc-text">嵌套的html元素</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#html%E5%B1%9E%E6%80%A7"><span class="toc-number">9.</span> <span class="toc-text">html属性</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#html%E6%96%87%E6%A1%A3%E5%AE%9E%E4%BE%8B"><span class="toc-number">10.</span> <span class="toc-text">html文档实例</span></a></li></ol>
                </div>
            
            <hr />
            <div itemprop="articleBody"><h2 id="什么是html？"><a href="#什么是html？" class="headerlink" title="什么是html？"></a>什么是html？</h2><p>HTML的全称为超文本标记语言(Hyper Text Markup Language)，是一种标记语言。它包括一系列标签，通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字、图形、动画、声音、表格、链接等。</p>
<h2 id="什么是超文本？"><a href="#什么是超文本？" class="headerlink" title="什么是超文本？"></a>什么是超文本？</h2><p>超文本是一种组织信息的方式，它通过超级链接方法将文本中的文字、图标与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中，也可能是其他文件，或是地理位置相距遥远的某台计算机上的文件。这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接，为人们查找，检索信息提供方便。</p>
<h2 id="html的定义"><a href="#html的定义" class="headerlink" title="html的定义"></a>html的定义</h2><p>超文本标记语言是标准通用标记语言下的一个应用，也是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）。浏览器按顺序阅读网页文件，然后根据标记符解释和显示其标记的内容，对书写出错的标记将不指出其错误，且不停止其解释执行过程，编制者只能通过显示效果来分析出错原因和出错部位。但需要注意的是，对于不同的浏览器，对同一标记符可能会有不完全相同的解释，因而可能会有不同的显示效果。</p>
<h2 id="html的历史"><a href="#html的历史" class="headerlink" title="html的历史"></a>html的历史</h2><ol>
<li>1982年，Tim Berners-Lee建立HTML</li>
<li>1993年，大学生的Marc Andreessen在他的Mosaic浏览器加入&lt;img&gt;标记，从此可以在Web页面上浏览图片</li>
<li>1993年6月，HTML由IETF工作小组发布草案</li>
<li>1994年10月，W3C成立，网络应用发展的标准规范交由W3C协会制定及推广</li>
<li>1995年11月，HTML2.0发布</li>
<li>1996年1月，HTML3.2由W3C推荐为标准规范</li>
<li>1997年11月，HTML4.0发布</li>
<li>1999年12月，HTML4.01以XML语法重新构建，较为严格，W3C推荐标准</li>
<li>2000年1月，XHTML1.0，W3C推荐标准</li>
<li>2000年6月，HTML2.0被宣布已经过时</li>
<li>2001年5月，XHTML1.0，W3C推荐标准</li>
<li>2004年，WHATWG小组成立，由各大浏览器开发商组成，重拾HTML4规格，开发HTML5规格</li>
<li>2006年，W3C认输，承认XHTML2.0不会成功</li>
<li>2007年，W3C重新成立HTML工作小组，参考WHATWG的规格发展HTML规格</li>
<li>2009年，XHTML2.0被废弃，全面投入HTML5规格的发展</li>
<li>2011年6月，Google宣布全面采用HTML5技术</li>
<li>2012年，HTML5被选为候选标准</li>
<li>2014年10月28日，W3C正式发布HTML5.0推荐标准</li>
</ol>
<h2 id="html的特点"><a href="#html的特点" class="headerlink" title="html的特点"></a>html的特点</h2><p>超文本标记语言文档制作不是很复杂，但功能强大，支持不同数据格式的文件镶如，这也是万维网(WWW)盛行的原因之一，其主要特点如下：</p>
<ol>
<li>简易性：超文本标记语言版本升级采用超集方式，从而更加灵活方便</li>
<li>可扩展性：超文本标记语言的广泛应用带来了加强功能，增加标识符等要求，超文本标记语言采用子类元素的方式，为系统扩展带来保证。</li>
<li>平台无关性：超文本标记语言可以使用在广泛的平台上</li>
<li>通用性：HTML是网络的通用语言，一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面，这些页面可以被网上任何其他人浏览到，无论使用的是什么类型的电脑或浏览器。</li>
</ol>
<h2 id="编辑方式"><a href="#编辑方式" class="headerlink" title="编辑方式"></a>编辑方式</h2><p>一个网页对应多个HTML文件，超文本标记语言文件以.htm或.html为扩展名(其中.htm是因为之前的文件系统只支持最多三位扩展名)。可以使用任何能够生成txt类型源文件的文本编辑器来产生超文本标记语言文件，只用修改文件后缀即可。</p>
<h3 id="推荐编辑器"><a href="#推荐编辑器" class="headerlink" title="推荐编辑器"></a>推荐编辑器</h3><ul>
<li><a target="_blank" rel="noopener" href="https://code.visualstudio.com/">VS Code</a></li>
<li><a target="_blank" rel="noopener" href="http://www.sublimetext.com/">Sublime Text</a></li>
<li><a target="_blank" rel="noopener" href="https://c.runoob.com/front-end/61/">在线编辑器</a></li>
</ul>
<h2 id="html元素"><a href="#html元素" class="headerlink" title="html元素"></a>html元素</h2><ul>
<li>html元素以开始标签起始，以结束标签终止</li>
<li>元素的内容是开始标签和结束标签之间的内容</li>
<li>某些html元素具有空内容(empty content)</li>
<li>空元素在开始标签中进行关闭(以开始标签的结束而结束)</li>
<li>大多数html元素可拥有属性</li>
</ul>
<h2 id="嵌套的html元素"><a href="#嵌套的html元素" class="headerlink" title="嵌套的html元素"></a>嵌套的html元素</h2><p>大多数html元素可以嵌套(html元素可以包含其他html元素)<br /><br>html文档由相互嵌套的html元素构成</p>
<h2 id="html属性"><a href="#html属性" class="headerlink" title="html属性"></a>html属性</h2><ul>
<li>html元素可以设置属性</li>
<li>属性可以在元素中添加附加信息</li>
<li>属性一把描述于开始标签</li>
<li>属性一般以键值对的形式出现</li>
</ul>
<blockquote>
<p>html标签、属性和属性值不区分大小写</p>
</blockquote>
<h2 id="html文档实例"><a href="#html文档实例" class="headerlink" title="html文档实例"></a>html文档实例</h2><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!-- </span></span><br><span class="line"><span class="comment">    声明文档，对浏览器使用该文件类型进行声明(告诉浏览器使用哪一种类型语言) </span></span><br><span class="line"><span class="comment">--&gt;</span></span><br><span class="line"><span class="meta">&lt;!DOCTYPE <span class="keyword">html</span>&gt;</span></span><br><span class="line"><span class="comment">&lt;!-- 根标签 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line">    <span class="comment">&lt;!-- 头部标签 --&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">head</span>&gt;</span><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="comment">&lt;!-- 主体标签 --&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">body</span>&gt;</span><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure></div>
        </div>
        
            <div class="kratos-copyright text-center clearfix">
                <h5 itemprop="copyrightNotice">本作品采用 <a rel="license nofollow" target="_blank" href="https://creativecommons.org/licenses/by-sa/4.0/">知识共享署名-相同方式共享 4.0 国际许可协议</a> 进行许可</h5>
            </div>
        
        <footer class="kratos-entry-footer clearfix">
            
                <div class="post-like-donate text-center clearfix" id="post-like-donate">
                
                
                    <a class="share" href="javascript:;"><i class="fa fa-share-alt"></i> 分享</a>
                    <div class="share-wrap" style="display: none;">
    <div class="share-group">
        <a href="javascript:;" class="share-plain qq" onclick="share('qq');" rel="nofollow">
            <div class="icon-wrap">
                <i class="fa fa-qq"></i>
            </div>
        </a>
        <a href="javascript:;" class="share-plain qzone" onclick="share('qzone');" rel="nofollow">
            <div class="icon-wrap">
                <i class="fa fa-star"></i>
            </div>
        </a>
        <a href="javascript:;" class="share-plain weixin pop style-plain" rel="nofollow">
            <div class="icon-wrap">
                <i class="fa fa-weixin"></i>
            </div>
            <div class="share-int">
                <div class="qrcode" id="wechat-qr"></div>
                <p>打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮</p>
            </div>
        </a>
        <a href="javascript:;" class="share-plain weibo" onclick="share('weibo');" rel="nofollow">
            <div class="icon-wrap">
                <i class="fa fa-weibo"></i>
            </div>
        </a>
        <a href="javascript:;" class="share-plain facebook style-plain" onclick="share('facebook');" rel="nofollow">
            <div class="icon-wrap">
                <i class="fa fa-facebook"></i>
            </div>
        </a>
        <a href="javascript:;" class="share-plain twitter style-plain" onclick="share('twitter');" rel="nofollow">
            <div class="icon-wrap">
                <i class="fa fa-twitter"></i>
            </div>
        </a>
    </div>
    <script type="text/javascript">
        $(()=>{
            new QRCode("wechat-qr", {
                text: "https://moon-cicada.gitee.io/blog/2023/10/31/HTML/html%E5%9F%BA%E7%A1%80/",
                width: 150,
                height: 150,
                correctLevel : QRCode.CorrectLevel.H
            });
        });
        function share(dest) {
            const qqBase        = "https://connect.qq.com/widget/shareqq/index.html?";
            const weiboBase     = "https://service.weibo.com/share/share.php?";
            const qzoneBase     = "https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?";
            const facebookBase  = "https://www.facebook.com/sharer/sharer.php?";
            const twitterBase   = "https://twitter.com/intent/tweet?";
            const hostUrl       = "https://moon-cicada.gitee.io/blog/2023/10/31/HTML/html%E5%9F%BA%E7%A1%80/";
            const title         = "「html基础」";
            const excerpt       = `什么是html？HTML的全称为超文本标记语言(Hyper Text Markup Language)，是一种标记语言。它包括一系列标签，通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML...`;
            let _URL;
            switch (dest) {
                case "qq"       : _URL = qqBase+"url="+hostUrl+"&title="+title+"&desc=&summary="+excerpt+"&site=cxpy";     break;
                case "weibo"    : _URL = weiboBase+"url="+hostUrl+"&title="+title+excerpt;                                 break;
                case "qzone"    : _URL = qzoneBase+"url="+hostUrl+"&title="+title+"&desc=&summary="+excerpt+"&site=cxpy";  break;
                case "facebook" : _URL = facebookBase+"u="+hostUrl;                                                        break;
                case "twitter"  : _URL = twitterBase+"text="+title+excerpt+"&url="+hostUrl;                                break;
            }
            window.open(_URL);
        };
    </script>
</div>
                
                </div>
            
            <div class="footer-tag clearfix">
                <div class="pull-left">
                <i class="fa fa-tags"></i>
                    <a class="tag-none-link" href="/blog/tags/%E5%89%8D%E7%AB%AF/" rel="tag">前端</a>, <a class="tag-none-link" href="/blog/tags/%E5%9F%BA%E7%A1%80/" rel="tag">基础</a>
                </div>
                <div class="pull-date">
                    <time datetime="2023-10-31T03:51:48.436Z" itemprop="dateModified">最后编辑：2023-10-31</time>
                </div>
            </div>
        </footer>
    </div>
    
        <nav class="navigation post-navigation clearfix" role="navigation">
            
            <div class="nav-previous clearfix">
                <a title=" 浏览器渲染原理" href="/blog/2023/10/29/浏览器原理/浏览器渲染原理/">&lt; 上一篇</a>
            </div>
            
            
            <div class="nav-next clearfix">
                <a title=" 文档类型声明标签" href="/blog/2023/10/31/HTML/文档类型声明标签/">下一篇 &gt;</a>
            </div>
            
        </nav>
    
    
        <div id="v-comments" class="post-comments"></div>
<script>
    var load_comm = () => {
        const init = () => {
            new Valine({
                el: '#v-comments',
                appId: 'cM5eOxMg63PZfmD94zakD07F-gzGzoHsz',
                appKey: 'Ig7h0RQDY2duLi5iYpxbM1ZW',
                visitor: true,
                enableQQ: true,
                path: '/blog/2023/10/31/HTML/html%E5%9F%BA%E7%A1%80/'
            });
        }
        if (typeof Valine === 'undefined') {
            const src = '/blog/vendors/valine@1.4.18/dist/Valine.min.js';
            $.getScript(src, init);
        } else {
            init();
        }
    };
</script>
<noscript>Please enable JavaScript to view the <a target="_blank" rel="noopener" href="https://valine.js.org/">comments powered by Valine.</a></noscript>

    
</article>

        

            </section>

        

                
            

<section id="kratos-widget-area" class="col-md-4 hidden-xs hidden-sm">
    <!-- 文章和页面根据splitter来分割，没有的话就从头开始设置为sticky -->
    
    
                <aside id="krw-about" class="widget widget-kratos-about clearfix">
    <div class="photo-background"></div>
    <div class="photo-wrapper clearfix">
        <div class="photo-wrapper-tip text-center">
            <img class="about-photo" src="/blog/images/avaths.webp" loading="lazy" decoding="auto" />
        </div>
    </div>
    <div class="textwidget">
        <p class="text-center"></p>
    </div>
    <div class="site-meta">
        <a class="meta-item" href="/blog/archives/">
            <span class="title">
                文章
            </span>
            <span class="count">
                6
            </span>
        </a>
        <a class="meta-item" href="/blog/categories/">
            <span class="title">
                分类
            </span>
            <span class="count">
                4
            </span>
        </a>
        <a class="meta-item" href="/blog/tags/">
            <span class="title">
                标签
            </span>
            <span class="count">
                6
            </span>
        </a>
    </div>
</aside>
            
                    <div class="sticky-area">
                
                    <aside id="krw-toc" class="widget widget-kratos-toc clearfix toc-div-class" >
    <div class="photo-background"></div>
    <h4 class="widget-title no-after">
        <i class="fa fa-compass"></i>
        文章目录
        <span class="toc-progress-bar" role="progressbar" aria-label="阅读进度："></span>
    </h4>
    <div class="textwidget">
        <ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%BB%80%E4%B9%88%E6%98%AFhtml%EF%BC%9F"><span class="toc-text">什么是html？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%BB%80%E4%B9%88%E6%98%AF%E8%B6%85%E6%96%87%E6%9C%AC%EF%BC%9F"><span class="toc-text">什么是超文本？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#html%E7%9A%84%E5%AE%9A%E4%B9%89"><span class="toc-text">html的定义</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#html%E7%9A%84%E5%8E%86%E5%8F%B2"><span class="toc-text">html的历史</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#html%E7%9A%84%E7%89%B9%E7%82%B9"><span class="toc-text">html的特点</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%BC%96%E8%BE%91%E6%96%B9%E5%BC%8F"><span class="toc-text">编辑方式</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%8E%A8%E8%8D%90%E7%BC%96%E8%BE%91%E5%99%A8"><span class="toc-text">推荐编辑器</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#html%E5%85%83%E7%B4%A0"><span class="toc-text">html元素</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%B5%8C%E5%A5%97%E7%9A%84html%E5%85%83%E7%B4%A0"><span class="toc-text">嵌套的html元素</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#html%E5%B1%9E%E6%80%A7"><span class="toc-text">html属性</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#html%E6%96%87%E6%A1%A3%E5%AE%9E%E4%BE%8B"><span class="toc-text">html文档实例</span></a></li></ol>
    </div>
</aside>
                
                
  <aside id="krw-categories" class="widget widget-kratos-categories clearfix">
    <h4 class="widget-title"><i class="fa fa-folder"></i>分类目录</h4>
      <ul class="category-list"><li class="category-list-item"><a class="category-list-link" href="/blog/categories/HTTP/">HTTP</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/blog/categories/Hello/">Hello</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/blog/categories/html/">html</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/blog/categories/%E6%B5%8F%E8%A7%88%E5%99%A8%E5%8E%9F%E7%90%86/">浏览器原理</a><span class="category-list-count">2</span></li></ul>
  </aside>


            
                
  <aside id="krw-tags" class="widget widget-kratos-tags clearfix">
    <h4 class="widget-title"><i class="fa fa-tags"></i>标签聚合</h4>
      <div class="tag-clouds">
        <a href="/blog/tags/Chrome/" style="font-size: 0.7em;">Chrome</a> <a href="/blog/tags/HTTP/" style="font-size: 0.6em;">HTTP</a> <a href="/blog/tags/%E5%89%8D%E7%AB%AF/" style="font-size: 0.7em;">前端</a> <a href="/blog/tags/%E5%8D%8F%E8%AE%AE/" style="font-size: 0.6em;">协议</a> <a href="/blog/tags/%E5%8E%9F%E7%90%86/" style="font-size: 0.7em;">原理</a> <a href="/blog/tags/%E5%9F%BA%E7%A1%80/" style="font-size: 0.8em;">基础</a>
      </div>
  </aside>

            
                
  <aside id="krw-posts" class="widget widget-kratos-posts">
  <h4 class="widget-title"><i class="fa fa-file"></i>最新文章</h4>
  <div class="tab-content">
      <ul class="list-group">
        
        
          
          
            <a class="list-group-item" href="/blog/2023/11/03/HTTP/HTTP%E5%9F%BA%E7%A1%80/"><i class="fa  fa-book"></i> HTTP基础</a>
            
          
        
          
          
            <a class="list-group-item" href="/blog/2023/10/31/HTML/%E6%96%87%E6%A1%A3%E7%B1%BB%E5%9E%8B%E5%A3%B0%E6%98%8E%E6%A0%87%E7%AD%BE/"><i class="fa  fa-book"></i> 文档类型声明标签</a>
            
          
        
          
          
            <a class="list-group-item" href="/blog/2023/10/31/HTML/html%E5%9F%BA%E7%A1%80/"><i class="fa  fa-book"></i> html基础</a>
            
          
        
          
          
            <a class="list-group-item" href="/blog/2023/10/29/%E6%B5%8F%E8%A7%88%E5%99%A8%E5%8E%9F%E7%90%86/%E6%B5%8F%E8%A7%88%E5%99%A8%E6%B8%B2%E6%9F%93%E5%8E%9F%E7%90%86/"><i class="fa  fa-book"></i> 浏览器渲染原理</a>
            
          
        
          
          
            <a class="list-group-item" href="/blog/2023/10/29/%E6%B5%8F%E8%A7%88%E5%99%A8%E5%8E%9F%E7%90%86/%E4%BA%8B%E4%BB%B6%E5%BE%AA%E7%8E%AF/"><i class="fa  fa-book"></i> 事件循环</a>
            
          
        
          
            
      </ul>
  </div>
  </aside>

            
    </div>
</section>
        
        </div>
    </div>
</div>
<footer>
    <div id="footer"  class="ap-lrc"  >
        <div class="container">
            <div class="row">
                <div class="col-md-6 col-md-offset-3 footer-list text-center">
                    <ul class="kratos-social-icons">
                        <!-- Keep for compatibility -->
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        <!-- New links -->
                        
                    </ul>
                    <ul class="kratos-copyright">
                        <div>
                            <li>&copy; 2023 月蝉の小窝 版权所有.</li>
                            <li>本站已运行<span id="span_dt">Loading...</span></li>
                        </div>
                        <div>
                            <li>Theme <a href="https://github.com/Candinya/Kratos-Rebirth" target="_blank">Kratos:Rebirth</a></li>
                            <li>Site built with&nbsp;<i class="fa fa-heart throb" style="color:#d43f57"></i>&nbsp;by 月蝉.</li>
                        </div>
                        <div>
                            <li>Powered by <a href="https://hexo.io" target="_blank" rel="nofollow">Hexo</a></li>
                            <li>Hosted on <a href="https://github.io" target="_blank">Github Pages</a></li>
                        </div>
                        <div>
                            
                            
                        </div>
                    </ul>
                </div>
            </div>
        </div>
        <div class="kr-tool text-center">
            <div class="tool">
                
                    <div class="box search-box">
                        <a href="/blog/search/">
                            <span class="fa fa-search"></span>
                        </a>
                    </div>
                
                
                    <div class="box theme-box" id="darkmode-switch">
                        <span class="fa fa-adjust"></span>
                    </div>
                
                
                    <div class="box theme-box" id="snow-switch">
                        <span class="fa fa-snowflake-o"></span>
                    </div>
                
                
            </div>
            <div class="box gotop-box">
                <span class="fa fa-chevron-up"></span>
            </div>
        </div>
    </div>
</footer>
</div>
</div>

        <script defer src="/blog/vendors/bootstrap@3.3.4/dist/js/bootstrap.min.js"></script>
<script defer src="/blog/vendors/nprogress@0.2.0/nprogress.js"></script>
<script>
    if (!window.kr) {
        window.kr = {};
    }
    window.kr.notMobile = (!(navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)));
    window.kr.siteRoot = "/blog/";
</script>

    <div>
        <canvas id="snow"></canvas>
        <script async src="/blog/js/snow.min.js"></script>
    </div>


    <script async src="/blog/js/candy.min.js"></script>



    <script defer src="/blog/vendors/aplayer@1.10.1/dist/APlayer.min.js"></script>
    
    <script defer src="/blog/vendors/meting@2.0.1/dist/Meting.min.js"></script>
    <meting-js
        server="netease"
        type="playlist"
        id="3204190542"
        order="random"
        fixed="true"
    >
    </meting-js>



    <script defer src="/blog/vendors/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>

<script defer src="/blog/js/kratosr.min.js"></script>
<script defer src="/blog/js/pjax.min.js"></script>



<!-- Extra support for third-party plguins  -->


    </body>
</html>